import React,{useEffect, useState} from 'react'
// import { button, Input } from 'antd-mobile'
import './insxas.scss'
import axios from 'axios'
function Sou() {

  const [zm,setZm] = useState( localStorage.getItem('zm') ||[])
  const zis = localStorage.getItem('zi')
  console.log(zis)
  const [data,setData] = useState([])

const getzi = ()=>{
  setZm(zm.concat(localStorage.getItem('zi')))
  localStorage.setItem('zm',zm.concat(localStorage.getItem('zi')))
// console.log(zm)

axios.get('/api/list',{params:{wd:zis}}).then((res)=>{
    console.log(res.data.data)
    setData(res.data.data)
  })
}

const qink = ()=>{
  localStorage.removeItem('zm')
  setZm([])
}


// useEffect(()=>[
  
// ],[])


return (
    <div className='qas'>
        <input style={{width:"200px"}}
          placeholder='请输入内容'
          // value={value}
          onChange={val => {
            localStorage.setItem('zi',val.target.value)
          }}
        />
        <button onClick={()=>{
          getzi()
        }}>搜索</button>
        <p onClick={()=>{
          qink()
        }}>清空</p>
        <div className="asd">
          <h2>历史搜索</h2>
        <span>{zm}</span>
        </div>
        <div className="bod">
          {
            data.map((v,i)=>{
              return <div key={i}>
                <img src={v.image} style={{width:"50px",height:"50px"}} alt="" />
                <h3>{v.title}</h3>
              </div>
            })
          }
        </div>
    </div>
  )
}

export default Sou
